<template>
  <view class="container">
    <!-- 导航栏 -->
    <NavBar
      title="党群活动"
      @clickRightFn="clickRightFn"
      :iconClass="identityInfo ? 'icon-xinzeng' : ''"
    />
    <view>
      <!-- 类型部分 -->
      <view class="choose-type">
        <view
          class="type"
          v-for="item in typeClassArr"
          :key="item.enumId"
          @click="clickItem(item)"
        >
          <image
            :src="item.imgSrc"
            style="width: 80rpx; height: 80rpx; border-radius: 50%"
            :draggable="false"
          >
          </image>
          <view class="item">
            {{ item.name }}
          </view>
        </view>
      </view>
      <!-- 显示类型对应的数据 -->
      <view class="play">
        <view class="play-title"> 党建活动 </view>
        <view class="play-btn">
          <view class="play-btn-title"> 活动状态 | </view>
          <view class="play-btn-right">
            <view
              class=""
              v-for="(i, index) in items"
              :key="index"
              @click="toggleCurrent(index)"
            >
              <view
                @click="chooseItem(index)"
                :style="current == index ? 'color: #3B95FF' : ''"
              >
                {{ i }}
              </view>
            </view>
          </view>
        </view>

        <view class="content" v-if="total">
          <view v-show="current === 0">
            <view class="" v-for="(item, index) in playContainArr" :key="index">
              <PlayContain :itemObj="item" @click="clickPlayContain(item)" />
            </view>
          </view>
          <view v-show="current === 1">
            <view class="" v-for="(item, index) in playContainArr" :key="index">
              <PlayContain :itemObj="item" @click="clickPlayContain(item)" />
            </view>
          </view>
          <view v-show="current === 2">
            <view class="" v-for="(item, index) in playContainArr" :key="index">
              <PlayContain :itemObj="item" @click="clickPlayContain(item)" />
            </view>
          </view>
          <view v-show="current === 3">
            <view class="" v-for="(item, index) in playContainArr" :key="index">
              <PlayContain :itemObj="item" @click="clickPlayContain(item)" />
            </view>
          </view>
        </view>
        <NoData v-else />
      </view>
    </view>
  </view>
</template>

<script>
import {
  getAllEnumMap,
  apiActivityList, // 获取活动列表
  apiChamberList, // 活动地点
} from "../../net/dagnqunhuodong.js";
import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData";
import PlayContain from "../common/play-contain.vue";
export default {
  components: {
    NavBar,
    NoData,
    PlayContain,
  },
  data() {
    return {
      typeId: 1,
      playContainArr: [],
      items: ["全部", "未开始", "进行中", "已结束"],
      current: 0,
      typeClassArr: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        activityStatus: null, //状态
        activityType: null, //类型
      },
      identityInfo: true, //判断身份信息
    };
  },
  onShow() {
    // 获取当前登录人身份信息
    let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
    if (permission.indexOf("common") > -1) {
      this.identityInfo = false;
    }
    if (
      permission.indexOf("admin") > -1 ||
      permission.indexOf("superAdmin") > -1
    ) {
      this.identityInfo = true;
    }

    this._getAllEnumMap();
    this.current = 0;
    this.playContainArr = [];
    this.params = {
      pageNum: 1,
      pageSize: 10,
      activityStatus: null, //状态
      activityType: null, //类型
    };
    this.getActivityList();
    this.getApiChamberList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.current = 0;
    this.playContainArr = [];
    this.params = {
      pageNum: 1,
      pageSize: 10,
      activityStatus: null, //状态
      activityType: null, //类型
    };
    this.getActivityList();
  },
  // 上拉加载
  onReachBottom() {
    console.log(this.params.pageNum , this.params.pageSize , this.total)
    if (this.params.pageNum * this.params.pageSize >= this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.getActivityList();
    }
  },
  methods: {
    // 获取活动地点
    getApiChamberList() {
      apiChamberList()
        .then((res) => {
          this.range2 = res.data.map((v) => {
            return {
              value: v.id,
              text: v.name,
            };
          });

          uni.setStorage({
            key: "activityPlaceArr",
            data: JSON.stringify(this.range2),
          });
        })
        .catch((err) => {
          console.log(err);
          this.range2 = [];
        });
    },
    // 点击数据详情
    clickPlayContain(item) {
      let params = {
        ...item,
        flag: false,
        navTitle: "活动详情",
      };

      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });

      uni.navigateTo({
        url: `../DJinitiateActivitiesInfos/index`,
      });
    },

    // 切换活动状态
    toggleCurrent(current) {
      this.params.pageNum = 1;
      this.playContainArr = [];
      this.total = 0;
      if (current == 0) {
        this.params.activityStatus = null;
      } else {
        this.params.activityStatus = current;
      }
      this.getActivityList();
    },

    // 获取活动列表
    getActivityList() {
      apiActivityList(this.params)
        .then((res) => {
          console.log(res);
          this.playContainArr = this.playContainArr.concat(res.data);
          this.total = res.total;
          uni.stopPullDownRefresh();
        })
        .catch((err) => {
          console.log(err);
          this.playContainArr = [];
          uni.stopPullDownRefresh();
        });
    },

    // 获取活动类型
    _getAllEnumMap() {
      getAllEnumMap()
        .then((res) => {
          this.typeClassArr = res.data.map((v) => {
            return {
              name: v.value,
              enumId: v.key,
              path: v.path,
              imgSrc: `/static/dangjian/0${v.key}.png`,
            };
          });
          uni.setStorage({
            key: "typeClassArr",
            data: JSON.stringify(this.typeClassArr),
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击类型
    clickItem(item) {
      console.log(item);
      if (item.enumId == 5) {
        uni.navigateTo({
          url: `../${item.path}/index`,
        });
      } else {
        uni.navigateTo({
          url: `../DJActivityDay/otherPage?item=${JSON.stringify(item)}`,
        });
      }
    },
    // 点击活动状态
    chooseItem(index) {
      this.current = index;
    },
    clickRightFn() {
      uni.removeStorage({
        key: "itemParams",
      });
      uni.navigateTo({
        url: "../DJinitiateActivities/index",
      });
    },
  },
};
</script>

<style>
page {
  background: #fff;
  height: 100%;
}

.container {
  width: 750rpx;
  overflow-y: scroll;
  padding-bottom: 20rpx;
  background: #fff;
  font-size: 30rpx;
}

.choose-type {
  margin: 0 auto;
  width: 700rpx;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #f1f1f1;
}

.type {
  width: 33.33%;
  text-align: center;
  margin: 30rpx 0;
}

.type img {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

/* 活动 */
.play {
  margin: 0 auto;
  /* margin-top: 50rpx; */
  width: 700rpx;
  /* height: 100vh; */
}

.play-title {
  color: #666666;
  font-size: 32rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.play-btn {
  font-size: 30rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.play-btn-title {
  flex: 2;
}

.play-btn-right {
  flex: 5;
  display: flex;
}

.play-btn-right view {
  display: inline-block;
  flex: 1;
}

.content {
  padding: 0 20rpx;
}
</style>
